Añadir sidebar (Columna)

Quiero añadir que todas la explicaciones dadas en este blog previamente han sido puestas en práctica, es obvio que los resultados son los esperados de lo contrario no tendría sentido explicar algo que no va a resultar bien, pero no hay que olvidar que todas las plantilla no son iguales, por lo tanto guarden siempre una copia de su plantilla por lo que pudiera suceder y miren siempre en vista previa antes de guardar los cambios.
Dicho esto vamos a añadir una nueva sidebar al blog, lo vamos a hacer en una plantilla Minima de Douglas Bowman.

Nos situamos en Plantilla hasta encontrar Outer-Wrapper.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Necesitamos modificar el ancho de #outer-wrapper #main-wrapper y #sidebar-wrapper sin olvidar el espacio que debe quedar entre la nueva sidebar (columna) y el main (lugar de las entradas)
Lo modificaremos de la siguiente forma:
Primero vamos a aumentar el ancho del blog que está definido en #outer-wrapper aumentaremos el ancho que es width:660px; a width: 750px; de esta forma estamos aumentando el blog 90px;

Luego buscaremos #main-wrapper, el valor de width: 410px; lo modificaremos a width: 400px;
También agregaremos un margen para el espacio entre la sidebar y la columna central y lo haremos añadiendo margin-left: 20px;

En #sidebar-wrapper el cambio será de width: 220px; a width: 150 px;

Nos quedará más o menos así:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
margin-left: 20px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 150px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Ahora justo después de:

#sidebar-wrapper {
width: 150px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Añadimos el siguiente código:

#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

Hay un detalle a tener en cuenta y es que float significa flotación, nos permite situar un elemento a izquierda o derecha.
Blogger, para establecer la ubicación añade $endSide para la derecha y $startSide para la izquierda, que podemos sustituirlo tranquilamente por left para izquierda y right para derecha.
Con esto lo que deseaba explicar es que podemos "mover" la segunda columna a nuestro antojo modificando la flotación y conseguir una sidebar en cada extremo, o las dos a un mismo lado.
float: left;
float: right;

Por último buscamos <div id='content-wrapper'> y a continuación añadimos :

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>







Nos vemos para personalizar la nueva sidebar ;)